<template>
  <div class="title">
    <div class="title-left">
      <div />
      <p>
        <slot name="title">
          {{ title }}
        </slot>
      </p>
    </div>
    <slot />
  </div>
</template>

<script>
/**
 * Title
 */
export default {
  name: 'Banner',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
    width: 100%;
    height: 37px;
    display: flex;
    flex-flow: nowrap row;
    margin: 16px 0;
    justify-content: space-between;
  }
  .title-left{
    height: 37px;
    display: flex;
    align-items: center;
    float: left;
  }
  .title-left>div{
    width:11px;
    height:20px;
    display: inline-block;
    background:rgba(72,141,255,1);
    border-radius:4px;
  }
  .title-left>p{
    margin-left: 14px;
  }
</style>
